<template>
	<view class="index">
		<view class="home">
		<view class="title">
			<image src="../../static/title.png"></image>
		</view>
		<view class="tag">
			<image src="../../static/tag.png" mode=""></image>
		</view>
		<view class="card1">
			<text>
				杨浦区人民检察院结合区域发展特点和自身职能，在“228街坊”设立“枫行远杨”检察官联络点，旨在围绕城市更新、社区复兴、“专精特新”涉企领域等民生热点，以打造宜居安居社区为目标，提供民生服务，开展矛盾化解、协调联络等相关工作，保障相关群体的合法权益。
			</text>
		</view>
		<view class="card2">
			<text class="card2_title">
				“枫行远杨”：
			 </text>
			 <view v-for="(item,index) in  cardList2" class="cardRow">
				<text>{{item.Htext}}</text> 
				<text>{{item.content}}</text>
			 </view>
		</view>
		<view class="card3">
			<text class="card3_title">
				有问题需要反映，请填写表单，点击确认。
			</text>
			<view class="formWrap">
			<form>
			<view class="uni-form-item uni-column">
				<view class="form_title">姓名</view>
				<input class="uni-input inputCash" name="input" placeholder="填写姓名" v-model="formData.name"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="form_title">联系方式</view>
				<input class="uni-input inputCash" name="input" placeholder="填写联系方式" v-model="formData.lxfs"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="form_title">反馈问题</view>
				<textarea class="uni-input areaCash" name="input" placeholder="这里可以填写您的意见或疑问" v-model="formData.content"/>
			</view>
			<view class="uni-btn-v" @click="submit">
				确认
			</view>
			</form>	
			</view>

		</view>
    </view>	
<!-- 	<view class="bannerbg">
		<image src="../../static/banner.png" mode=""></image>
	</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData:{
				name:"",
				lxfs:"",
				content:""
			},
			cardList2:[
				{
					Htext:"“枫”",
					content:"即坚持和发展新时代枫桥经验；"
				},
				{
					Htext:"“行”",
					content:"即开展行政检察及行政争议实质性化解工作；"
				},
				{
					Htext:"“远”",
					content:"即以人民为中心，以高质效办案为目标，行稳致远；"
				},
				{
					Htext:"“杨”",
					content:"即结合区位特点，发挥杨浦检察属地优势，坚持矛盾不上交，就地化解问题。"
				}
			]
		}
	},
	onLoad() {},
	mounted() {
		
	},
	methods: {
		submit(){
			const enmu = {
				"name":"姓名",
				"lxfs":"手机号",
				"content":"反馈问题"
			}
			 let noPassList = []
			for(let key in this.formData){
				if(this.formData[key] === ""){
					noPassList.push(enmu[key])
				}
			}
			if(noPassList.length > 0){
				let wran = noPassList.reduce((str,current)=>{
					str += current + ' '
					return str
				},'')
				uni.showToast({
					icon:"error",
					title:wran + '不能为空！'
				})
			}else{
				// 验证手机号
				let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
				const flag = reg.test(this.formData.lxfs)
				if(!flag){
					uni.showToast({
						icon:"error",
						title:"手机号格式错误"
					})
				}else{
				uni.request({
					url:"/sendmessage3.html",
					method:"POST",
					data:this.formData,
					 header: {
					          'Content-Type': 'application/json'
					        },
					success(res) {
						if(res.status === 'ok'){
							uni.showToast({
								icon:"success",
								title:"提交成功！"
							})
						}else{
							uni.showToast({
								icon:"error",
								title:res.msg
							})
						}
					},
					fail(err){
					  uni.showToast({
					  	icon:"error",
					  	title:"提交失败"
					  })
					}
				})	
				}
				 // window.location.href='http://www.baidu.com'
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.index{
width: 100%;
overflow: hidden;
background: url('../../static/banner.png') no-repeat;
background-size: 750rpx 1034rpx;
background-position: 0 -22rpx;
background-color: #142c8a;
.home{
.title{
	margin: 70rpx 0 38rpx 0;
	display: flex;
	justify-content: center;
	image{
		width: 441rpx;
		height: 271rpx;
	}
	}
	.tag{
		display: flex;
		justify-content: center;
		image{
		width: 497rpx;
		height: 65rpx;	
		}
	}
	.card1{
		margin: 120rpx auto 75rpx;
		width: 682rpx;
		background:url('../../static/brand1.png') no-repeat;
		background-size: 100% 100%;
		padding: 38rpx 45rpx;
		font-size: 32rpx;
		line-height: 50rpx;
		color: #fff;
	}
	.card2{
		width: 682rpx;
		margin: 0 auto 75rpx;
		background: url('../../static/brand2.png') no-repeat center;
		background-size: 100% 100%;
		padding: 24rpx 45rpx 18rpx;
		.card2_title{
		font-size: 34rpx;	
		color: #00EAFF;
		line-height: 58rpx;
		}
		.cardRow{
			font-size: 32rpx;
			line-height: 58rpx;
			color: #fff;
			text{
				&:first-child{
					color: #00EAFF;
				}
			}
		}
	}
	.card3{
		width: 682rpx;
		padding: 34rpx 45rpx;
		background: url("../../static/brand3.png") no-repeat center;
		background-size: 100% 100%;
		margin: 0 auto 56rpx;
		.card3_title{
			font-size: 36rpx;
			color: #fff;
			line-height: 50rpx;
		}
		.formWrap{
			margin-top: 32rpx;
			.uni-form-item{
				margin-top: 22rpx;
			}
			.form_title{
			text-align: left;
			color: #fff;
			font-size: 32rpx;
			line-height: 45rpx;
			}
			/deep/ .uni-input-input{
				color: #00EAFF !important;
				font-size: 28rpx !important;
			}
			/deep/.uni-input-placeholder ,.uni-textarea-placeholder{
				color: #00EAFF !important;
				font-size: 28rpx;
			}
			/deep/ .uni-textarea-textarea{
				color: #00EAFF !important;
				font-size: 28rpx !important;
			}
			.inputCash{
				border-bottom: 1px dashed #05BFEA;
				padding-bottom: 8rpx;
				margin-top: 20rpx;
				caret-color: #142c8a; 
			}
			.areaCash{
					border: 1px dashed #05BFEA;
					width: 100%;
					margin-top: 20rpx;
					padding: 10rpx 20rpx;
					caret-color: #142c8a; 
					
			}
			.uni-btn-v{
				margin: 70rpx auto 40rpx;
				width: 584rpx;
				height: 62rpx;
				background-color: #00EAFF;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				line-height: 62rpx;
				border-radius: 8rpx;
			}

		}

	}
}
// .bannerbg{
// position: absolute;
// top: 0;
// left: 0;
// z-index: 8;
// width: 750rpx;
// height: 1034rpx;
// image{
// 	width: 100%;
// 	height: 100%;
// }
// }
}
</style>
